<template>
  <div :class="{ 'app-container': true, hasCar: $route.meta.hasbar }">
    <div class="layout-content" ref="layout">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
      <router-view v-else></router-view>
    </div>
    <Footer />
    <div class="layout-footer" v-if="$route.meta.hasbar">
      <TabBar :data="tabbars" />
    </div>
    <Nav :naviconUrl="navIcon"/>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
import Footer from '@/components/Footer'
import Nav from '@/components/Nav'

export default {
  name: 'AppLayout',
  data() {
    return {
      navIcon:'',
      navIcon01:require('assets/image/nav/nav-icon01.png'),
      navIcon02:require('assets/image/nav/nav-icon04.png'),
      routePath:'',
      active: 0,
      tabbars: [
        {
          title: '首页',
          img:require('assets/image/tabBar/index_N.png'),
          activeImg:require('assets/image/tabBar/index_S.png'),
          // icon: 'iconfont iconshouye',
          path: '/home',
          to: {
            name: 'Home'
          }
        },
         {
          title: 'MES/MOM',
          img:require('assets/image/tabBar/mom_N.png'),
          activeImg:require('assets/image/tabBar/mom_S.png'),
          // icon: 'iconfont iconshouye',
          path: '/mes',
          to: {
            name: 'MES'
          }
        },
        {
          title: '纺智云',
          // icon: 'iconfont iconyuncunchu',
          img:require('assets/image/tabBar/mes_N.png'),
          activeImg:require('assets/image/tabBar/mes_S.png'),
          path: '/cloud',
          to: {
            name: 'Cloud'
          }
        },
        {
          title: '供应链',
          // icon: 'iconfont iconxunimanyou',
          img:require('assets/image/tabBar/supp_N.png'),
          activeImg:require('assets/image/tabBar/supp_S.png'),
          path: '/zhi',
          to: {
            name: 'Zhi'
          }
        },
        {
          title: '行业应用',
          // icon: 'iconfont iconshouji54',
          img:require('assets/image/tabBar/industry_N.png'),
          activeImg:require('assets/image/tabBar/industry_S.png'),
          path: '/supply',
          to: {
            name: 'supply'
          }
        }
        // {
        //   title: '七一云',
        //   icon: 'iconfont iconqiyiyun',
        //   path: "/yun",
        //   to: {
        //     name: 'Yun'
        //   }
        // }
      ]
    }
  },
  components: {
    TabBar,
    Footer,
    Nav
  },
  mounted(){
    this.routePath=this.$route.path
    this.$store.commit('SET_PATH_Now', this.$route.path)
    this.changePath()
  },
  methods: {
    changePath(){
      if(this.$store.state.app.pathNow==='/home'||
      this.$store.state.app.pathNow==='/newslist'){
        this.navIcon=this.navIcon01
      }
      else{
        this.navIcon=this.navIcon02
      }
    }
  },

  watch: {
    $route(to) {
      const main = this.$refs.layout
      main.scrollTo(0, 0)
      // this.routePath=to.path
      this.$store.commit('SET_PATH_Now', to.path)
      // console.log(this.$store.state.app.pathNow);
      this.changePath()
      // console.log(this.routePath);
    }
  }
}
</script>
